<template>
  <div class="reset_captcha">
    <header>
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">重设密码</div>
    </header>
    <main>
      <p>您的手机号码：+86 {{user_data.phone.slice(0,3)}}****{{user_data.phone.slice(-4)}}</p>
      <p>您会收到一条带有验证码的短信，请输入验证码</p>
      <div class="center">
        <input type="tel" pattern="[0-9]*" name="code[]" class="now" maxlength="1" autofocus />
        <input type="tel" pattern="[0-9]*" name="code[]" class="now" maxlength="1" />
        <input type="tel" pattern="[0-9]*" name="code[]" class="now" maxlength="1" />
        <input type="tel" pattern="[0-9]*" name="code[]" class="now" maxlength="1" />
      </div>
      <div class="countdown">
        <span ref="time" class="time show">{{countdown}}s</span>
        <span class="sent hide" @click="sent()">重新获取</span>
      </div>
    </main>
    <v-alert v-show="alert_flag" :msg="msg"></v-alert>
  </div>
</template>
<script>
import vAlert from "@/components/alert";
import { mapState } from "vuex";
export default {
  components: {
    vAlert
  },
  data() {
    return {
      msg: "",
      alert_flag: false,
      captcha: "",
      countdown: 60
    };
  },
  computed: {
    ...mapState("user", ["user_data"])
  },
  mounted() {
    let that = this;
    this.ctime();
    $(".now").keyup(function() {
      if (event.keyCode == 8) {
        if ($(this).index() > -1) {
          $(this)
            .prev("input")
            .focus();
          that.captcha = "";
        }
      } else {
        if (/^[0-9]*$/.test(this.value) && this.value != "") {
          if ($(this).index() < 4) {
            $(this)
              .next("input")
              .focus();
          }

          if ($(this).index() >= 3) {
            $(".now").each((index, item) => {
              that.captcha += item.value;
            });
            that.$store
              .dispatch("captcha/getCaptchaData", {
                phone: that.$store.state.user.user_data.phone,
                ctcode: 86,
                captcha: that.captcha
              })
              .then(
                data => {
                  if (data.code == 200) {
                    let nickname = that.$store.state.user.user_data.nickname;
                    let phone = that.$store.state.user.user_data.phone;
                    let captcha = that.captcha;
                    let password = that.$store.state.user.user_data.password;
                    let ctcode = that.$store.state.user.user_data.ctcode;

                    that.$store
                      .dispatch("register_success/getRegisterData", {
                        phone: phone,
                        password: password,
                        ctcode: ctcode,
                        captcha: captcha,
                        nickname: nickname
                      })
                      .then(
                        data => {
                          if (data.code == 200) {
                            that.$router.push({ name: "Home" });
                          } else {
                            that.msg = "注册失败";
                            that.alert_flag = true;
                            setTimeout(() => {
                              that.alert_flag = false;
                            }, 3000);
                          }
                        },
                        flag => {
                          if (!flag) {
                            that.msg = "注册失败";
                            that.alert_flag = true;
                            setTimeout(() => {
                              that.alert_flag = false;
                            }, 3000);
                          }
                        }
                      );
                  }
                },
                data => {
                  that.msg = "验证码不正确！";
                  that.alert_flag = true;
                  setTimeout(() => {
                    that.alert_flag = false;
                  }, 3000);
                }
              );
          }
        } else {
          this.value = "";
        }
      }
    });
  },
  methods: {
    ctime() {
      let time = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(time);
          $(".time").removeClass("show");
          $(".time").addClass("hide");
          $(".sent").removeClass("hide");
          $(".sent").addClass("show");
        }
      }, 1000);
    },
    back() {
      this.$router.go(-1);
    },
    sent() {
      $(".now").each((index,item)=>{
        item.value = "";
        if(index == 0){
          item.focus();
        }
      })
      this.$store
        .dispatch("sent_captcha/getSentCaptchaData", {
          phone: this.$store.state.user.user_data.phone,
          ctcode: 86
        })
        .then(
          data => {
            if (data.code == 200) {
              this.countdown = 60;
              $(".time").removeClass("hide");
              $(".time").addClass("show");
              $(".sent").removeClass("show");
              $(".sent").addClass("hide");
              this.ctime();
            } else {
              this.msg = "验证码发送失败，请重试";
              this.alert_flag = true;
              setTimeout(() => {
                this.alert_flag = false;
              }, 3000);
            }
          },
          data => {
            if (data.code != 200) {
              this.msg = data.message;
              this.alert_flag = true;
              setTimeout(() => {
                this.alert_flag = false;
              }, 3000);
            }
          }
        );
    }
  }
};
</script>

<style lang="scss" scoped>
.reset_captcha {
  height: 100%;
  width: 100%;
  .show {
    display: inline-block;
  }
  .hide {
    display: none;
  }
  main {
    padding: 0.5rem;
    .countdown {
      overflow: hidden;
      line-height: 1rem;
      span {
        color: rgba(237, 73, 62, 1);
        float: right;
        font-size: 0.3rem;
      }
    }
    p {
      text-align: left;
      color: #999;
      font-size: 0.3rem;
    }
    .center {
      display: flex;
      width: 100%;
      margin: 0 auto;
      input {
        flex: 1;
        height: 1.5rem;
        font-size: 0.5rem;
        text-align: center;
        border: 0;
        border-radius: 0;
        margin-right: 0.4rem;
      }
      input:last-child {
        margin-right: 0;
      }
      .now {
        width: 0.7rem;
        border-bottom: 0.04rem rgba(237, 73, 62, 1) solid;
      }
      .now:focus {
        border-bottom: 0.04rem rgba(237, 73, 62, 1) solid;
      }
    }
  }
  header {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    left: 0rem;
    top: 0rem;
    background-color: rgba(237, 73, 62, 1);
    overflow: hidden;
    position: relative;
    .left {
      position: absolute;
      top: 0.15rem;
      left: 0.2rem;
      i {
        background: url(../images/bck.png) no-repeat;
        background-size: 100% 100%;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
      }
    }
    .center {
      font-size: 0.4rem;
      color: #fff;
      text-align: center;
    }
  }
}
</style>